<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>招聘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
            width: 100%;
            -webkit-transform: translateZ(0);
            -webkit-transform: translate3d(0, 0, 0);
        }
        
        body {
            /*background-color: #FF7D9D;
            background-size: 58px 58px;
            background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
            background-image: linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px);
            */
            background: url("bg.jpg") repeat;
            font-family: fantasy;
            font-size: 14px;
            color: #111;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 16px;
        }
        
        li {
            list-style: none;
        }
        
        a {
            color: #111;
            text-decoration: none;
        }
        
        .wapper {
            box-sizing: border-box;
            width: 100vw;
            -webkit-transition-duration: 0.5s;
        }
        
        .list {
            margin: 0 auto;
            width: 85vw;
        }
        
        .list li {
            background: url(texture-arenaceous.png), linear-gradient(0deg, #efefef, #ffffff);
            border-radius: 4px;
            box-shadow: 1px 1px 5px #ccc;
            height: 8vh;
            left: 0;
            line-height: 1.5;
            margin: 0 0 20px;
            overflow: hidden;
            position: relative;
            text-align: center;
            top: 0;
            z-index: 2;
            -webkit-transition-duration: 0.4s;
        }
        
        .list li:before {
            background: url(texture-arenaceous.png), linear-gradient(0deg, #f94b5f, #fb6878);
            border-bottom-right-radius: 15px;
            box-shadow: 1px 1px 3px #aaa;
            content: attr(title);
            color: #fdf7ea;
            font-size: 12px;
            height: 3.5vh;
            left: -5px;
            line-height: 2.7;
            position: absolute;
            text-indent: 12px;
            top: -5px;
            width: 18vw;
            z-index: 1;
            -webkit-transition-duration: 0.4s;
        }
        
        .list li:after {
            background: url(icon-location@3x.png);
            background-size: 100%;
            content: '';
            height: 13px;
            left: 8px;
            position: absolute;
            top: 2px;
            width: 10px;
            z-index: 2;
        }
        
        .list a {
            box-sizing: border-box;
            border: transparent;
            color: #b60035;
            cursor: pointer;
            display: block;
            height: 8vh;
            line-height: 200%;
            padding: 15px;
            -webkit-transition-duration: 0.4s;
        }
        
        .list .active {
            height: 100vh;
            overflow: scroll;
            position: fixed;
            width: 100vw;
            z-index: 3;
            -webkit-overflow-scrolling: touch;
        }
        
        .list .active:before {
            left: 0;
            line-height: 2.4;
            top: 0;
        }
        
        .list .active:after {
            left: 10px;
            top: 5px;
        }
        
        .list .active a {
            border-bottom: 1px #d2d2d2 solid;
            color: #111;
            font-size: 17px;
            font-weight: 700;
            padding-bottom: 6vh;
            text-align: left;
            margin: 4vh 0 0;
        }
        
        .list dl {
            margin: 0 auto;
            padding: 0 0 10vh;
            text-align: left;
            width: 85vw;
        }
        
        .list dt,
        .list dd {
            margin: 0 0 1vh;
        }
        
        .list dt {
            border-left: 2px #f00 solid;
            font-weight: 800;
            height: 18px;
            margin: 3vh 0;
            padding: 0 0 0 2vw;
        }
        
        .list dd {
            font-size: 13px;
        }
        
        .mail {
            background: #fff;
            bottom: -200px;
            border-top: 1px #d2d2d2 solid;
            height: 54px;
            position: absolute;
            width: 100vw;
            z-index: 4;
            -webkit-transition-duration: 0.4s;
        }
        
        .mail a {
            background: #ff5a5a;
            border-radius: 5px;
            color: #fff;
            display: block;
            font-size: 16px;
            height: 5vh;
            line-height: 6vh;
            margin: 1.5vh auto;
            text-indent: 13vw;
            width: 40vw;
        }
        
        .show {
            bottom: 0;
        }
        
        .eye {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            box-shadow: 20px 0px 0px 0px rgba(255, 255, 255, 0.8);
            position: relative;
            left: -25px;
            top: 2px;
            display: inline-block;
        }
        
        .eye:after {
            background-color: #59488b;
            width: 8px;
            height: 8px;
            box-shadow: 20px 0px 0px 0px #59488b;
            border-radius: 50%;
            left: 9px;
            top: 2px;
            position: absolute;
            content: "";
            -webkit-animation: eyeball 1.5s linear infinite alternate;
            -moz-animation: eyeball 1.5s linear infinite alternate;
            animation: eyeball 1.5s linear infinite alternate;
        }
        
        @-webkit-keyframes eyeball {
            0% {
                left: 6px;
            }
            100% {
                left: 1px;
            }
        }
        
        @-moz-keyframes eyeball {
            0% {
                left: 6px;
            }
            100% {
                left: 1px;
            }
        }
        
        @keyframes eyeball {
            0% {
                left: 6px;
            }
            100% {
                left: 1px;
            }
        }
    </style>
</head>

<body>
    <div class="wapper full">
        <ul class="list">
            <li title="北京" class="active"><a href='#'>广告运营执行</a>
                <dl>
                    <dt>岗位职责：</dt>
                    <dd>1、熟悉互联网或者电视媒体广告执行相关流程。</dd>
                    <dd>2、熟练掌握媒介策略、排期、购买及执行等工作。</dd>
                    <dd>3、熟悉各大媒体的政策和折扣，具有较强的执行能力。</dd>
                    <dd>4、具有较强的专业媒介分析与策划能力。</dd>
                    <dd>5、具有较强的数据敏感度及分析能力。</dd>
                    <dd>6、负责与客户、公司内部的日常沟通、协调工作。</dd>
                    <dt>岗位要求：</dt>
                    <dd>1、广告、传媒、公关类专科以上学历，有相关专业背景。</dd>
                    <dd>2、性别不限，最好有工作经验2年以上（有广告行业经验者优先）。</dd>
                    <dd>3、个人形象气质佳，性格开朗大方，具有较强的人际沟通、协调能力及应变能力。</dd>
                    <dd>4、责任心强，具有认真、细致的工作态度和专业的服务意识。</dd>
                    <dd>5、对工作有热情和责任感，具有较强的敬业精神和团队合作精神。</dd>
                    <dd>6、能够熟练使用各类常用办公软件，如Word、Excle、Power point等办公软件。</dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="mail show">
        <a href="mailto:advertise@huan.tv"><span class="eye"></span>立即投递（advertise@huan.tv）</a>
    </div>
</body>

</html>